<template>
  <div id='wrap'>
    <h1>插槽案例</h1>
    <div>
      <demo :ismoon="3"></demo>
    </div>

    <div>
      <demo1></demo1>
      <demo1>
        <button @click="num++">{{ num }}</button>
        <demo :ismoon="2"></demo>
      </demo1>
    </div>

    <!-- 支持具名插槽和动态具名插槽，适合用于布局复杂的内容 -->
    <div>
      <demo2>
        <!-- # == v-slot -->
        <template #header>
          <div>new header</div>
        </template>

        <template #default>
          <div>new main</div>
        </template>

        <template v-slot:footer>
          <div>new footer</div>
        </template>
      </demo2>

      <demo2>
        <template #[dynamicSlotName]>sing</template>
        <button @click="edit">修改动态的具名插槽</button>
      </demo2>

      <div>
        <demo3>
          <template #default="slotprops">
            <div>new main{{ slotprops.msg }}</div>
          </template>
          <!-- # == v-slot -->
          <template #header>
            <div>new header</div>
          </template>

          <template v-slot:footer>
            <div>new footer</div>
          </template>
        </demo3>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'vue',
}
</script>

<script lang='ts' setup>
import { ref, h, type Ref, isRef, reactive, isReactive, readonly, isReadonly, toRef, toRefs, unref, isProxy } from 'vue';
import demo from './components/demo.vue';
import demo1 from './components/demo1.vue';
import demo2 from './components/demo2.vue';
import demo3 from './components/demo3.vue';
//demo1的响应式变量
const num = ref(0)

//demo2的动态具名插槽的名称
const dynamicSlotName = ref('');
const edit = () => {
  dynamicSlotName.value = 'dynamicSlotName'
}
</script>

<style lang='scss'>
@use '@/assets/common.scss';
</style>
